<template>
  <div class="demo">
    <div class="demo-title">倒计时</div>
    <div class="demo-content">
      <Row :gutter="16">
        <Col :span="12">
          <Statistic.Countdown
            title="Countdown"
            :value="deadline"
            style="margin-right: 50px"
            @finish="onFinish"
          />
        </Col>
        <Col :span="12">
          <Statistic.Countdown
            title="Million Seconds"
            :value="deadline"
            format="HH:mm:ss:SSS"
            style="margin-right: 50px"
          />
        </Col>
        <Col :span="24" style="margin-top: 32px">
          <Statistic.Countdown title="Day Level" :value="deadline" format="D 天 H 时 m 分 s 秒" />
        </Col>
      </Row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Row, Col } from '@sscd/grid';
  import Statistic from '@sscd/statistic';
  const onFinish = () => console.log('finished!');
  const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>
